<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工信息列表</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#app {
				width: 600px;
				text-align: center;
				margin: 50px auto;
			}

			table, td, th {
				border-collapse: collapse;
				/* 合并边框模型 */
				border-spacing: 0;
				/* 边框间距 */
			}

			table {
				margin: 0 auto;
				border: 100%;
			}

			td, th {
				border: 1px solid #bcbcbc;
				padding: 5px 10px;
			}

			th {
				background: #42b983;
				font-size: 1.2rem;
				font-weight: 400;
				color: #fff;
				cursor: pointer;
				width: 100px;
			}

			tr:nth-of-type(odd) {
				/* 设置下标为偶数的tr背景颜色 */
				background: #fff;
			}

			tr:nth-of-type(even) {
				/* 设置下标为奇数的tr背景颜色 */
				background: #eee;
			}
		</style>
	</head>
	<body>
		<div id="app">
				<h1>{{title}}</h1>
				<emplist-component></emplist-component>
		</div>
		<template id="emplist">
			<div>
				<table>
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>地址</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(emp,index) in emps" :key="emp.id">
							<td>{{emp.id}}</td>
							<td>{{emp.name}}</td>
							<td>{{emp.age}}</td>
							<td>{{emp.addrss}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</template>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data:{
					title: "员工信息列表"
				},
				components:{
					"emplist-component":{
						template:"#emplist",
						data:function(){
							return {
								emps: [
									{id: 1,name: "张三",age: 20,addrss: "云南"},
									{id: 2,name: "李四",age: 21,addrss: "四川"}, 
									{id: 3,name: "王五",age: 22,addrss: "贵州"}, 
									{id: 4,name: "赵六",age: 23,addrss: "北京"}, 
									{id: 5,name: "钱七",age: 24,addrss: "上海"}
								]
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
